<template>
  <div class="dateContainer">
		<div class="header">
			<van-cell title="姓名" is-link :value="personDate.name" @click="jumpText('姓名', 'name', id ,personDate.name)"/>
			<van-cell title="用户名" :value="personDate.nickname"  @click="jumpText('用户名', 'nickname', id ,personDate.nickname)"/>
			<van-cell title="性别" is-link :value="personDate.sexname"  @click="showsex"/>
			<van-cell title="学号" :value="personDate.stu_id"/>
			<van-cell title="手机号" is-link :value="personDate.mobile"  @click="jumpText('手机号','mobile', id, personDate.mobile)"/>
			<van-cell title="身份证号" is-link :value="personDate.idcard" @click="jumpText('身份证号', 'idcard', id,personDate.idcard)"/>
			<van-cell title="出生日期" :value="personDate.birthday" @click="showPopup"/>
		</div>
		<div class="teacher" v-if="isTeacher == 2">
			<van-cell title="政治面貌" is-link :value="personDate.politics" @click="jumpText('政治面貌', 'politics',id, personDate.politics)"/>
			<van-cell title="学历" is-link :value="personDate.education" @click="showeducation" />
			<van-cell title="职业" is-link :value="personDate.occupation" @click="jumpText('职业','occupation', id, personDate.occupation)"/>
			<van-cell title="职业资称" is-link :value="personDate.title"  @click="showtitle"/>
			<van-cell title="工作单位" is-link :value="personDate.company" @click="jumpText('工作单位','company', id, personDate.company)"/>
			<van-cell title="社会兼职" is-link :value="personDate.work"  @click="jumpText('社会兼职','work', id, personDate.work)"/>
			<van-cell title="专业特长" is-link :value="personDate.specialty" @click="jumpText('专业特长','specialty', id, personDate.specialty)"/>
			<van-cell title="个人简介" is-link :value="personDate.introduce" @click="jumpText('个人简介','introduce', id, personDate.introduce)" />
			<van-cell title="照片" :value="personDate.avatar">
				<van-image
					width="4rem"
					height="4rem"
					:src="personDate.avatar"
				/>
			</van-cell>
		</div>

		<div class="teacher" v-if="isTeacher == 3">
			<van-cell title="常住乡镇" is-link :value="personDate.area" @click="jumpText('常住乡镇','area', id, personDate.area)" />
			<van-cell title="家庭住址" is-link :value="personDate.address"  @click="jumpText('家庭住址','address', id, personDate.address)"/>
			<van-cell title="政治面貌" is-link :value="personDate.politics" @click="jumpText('政治面貌', 'politics',id, personDate.politics)"/>
			<van-cell title="学历" is-link :value="personDate.education" @click="showeducation" />
			<van-cell title="职业" is-link :value="personDate.occupation" @click="jumpText('职业','occupation', id, personDate.occupation)"/>
			<van-cell title="个人简介" is-link :value="personDate.introduction" @click="jumpText('个人简介','introduction', id, personDate.introduction)"/>
			<van-cell title="照片" :value="personDate.avatar">
				<van-image
					width="4rem"
					height="4rem"
					:src="personDate.avatar"
				/>
			</van-cell>
		</div>

		<div class="teacher" v-if="isTeacher == 1">
			<van-cell title="常住乡镇" is-link :value="personDate.area" @click="jumpText('常住乡镇','area', id, personDate.area)" />
			<van-cell title="家庭住址" is-link :value="personDate.address"  @click="jumpText('家庭住址','address', id, personDate.address)"/>
			<van-cell title="政治面貌" is-link :value="personDate.politics" @click="jumpText('政治面貌', 'politics',id, personDate.politics)"/>
			<van-cell title="学历" is-link :value="personDate.education" @click="showeducation" />
			<van-cell title="兴趣爱好" is-link :value="personDate.hobby" @click="jumpText('兴趣爱好','hobby', id, personDate.hobby)"/>
			<van-cell title="照片" :value="personDate.avatar">
				<van-image
					width="4rem"
					height="4rem"
					:src="personDate.avatar"
				/>
			</van-cell>
		</div>
		<van-popup v-model="show" position="bottom">
			<van-datetime-picker
				v-model="currentDate"
				type="date"
				title="选择年月日"
				:min-date="minDate"
				:max-date="maxDate"
				@confirm="okTime"
				@cancel="show = false"
			/>
		</van-popup>

    <van-popup v-model="sexPick" position="bottom">
      <van-picker
        title="性别"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="sexPick = false"
      />
    </van-popup>

    <van-popup v-model="educationPopup" position="bottom">
      <van-picker
        title="学历"
        show-toolbar
        :columns="columnsed"
        @confirm="onConfirmed"
        @cancel="educationPopup = false"
      />
    </van-popup>

    <van-popup v-model="titlePopup" position="bottom">
      <van-picker
        title="职业资称"
        show-toolbar
        :columns="columnsti"
        @confirm="onConfirmti"
        @cancel="educationPopup = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      // 当前数据的 id
      id: 0,
      // 职业资称
      titlePopup: false,
      columnsti: ["高级", "中级", "初级", "无"],
      // 学历
      educationPopup: false,
      columnsed: ["小学", "初中", "高中", "大专", "本科", "硕士研究生及以上"],
      // 性别
      columns: ["男", "女"],
      sexPick: false,
      // 日期
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2030, 12, 1),
      currentDate: new Date(2021, 0, 17),
			show: false,
			// 展示的数据
			personDate: {},
			// teacher / student
			isTeacher: 1
		}
	},
	created() {
		const params = {}
		params.campus_id = JSON.parse(localStorage.getItem('selectedCampus')).id
		params.openid = this.$store.state.openid || localStorage.getItem('openid')
		console.log(params)
		this.$request.getStudent(params).then(res => {
			console.log(res)	
			if(res.data.teacher == 2 && res.data.volunteer == 1) {
				// 教师
				this.isTeacher = 2
				localStorage.setItem('teacher', this.isTeacher)
				this.$request.getTeacher(params).then(res => {
					this.id = res.data.id
					this.personDate = res.data
					this.currentDate = new Date(res.data.birthday)
				})
			} else if(res.data.teacher == 1 && res.data.volunteer == 2) {
				// 志愿者
				this.isTeacher = 3
				localStorage.setItem('teacher', this.isTeacher)
				this.id = res.data.id
				this.personDate = res.data
			} else {
				this.id = res.data.id
				// 学生
				this.isTeacher = 1
				this.personDate = res.data
				localStorage.setItem('teacher', this.isTeacher)
			}
		})
	},
	methods: {
		jumpText(tag,name, id,value) {
			this.$router.push({
				path:'/my/textPage',
				query:{
					tag,
					name,
					value,
					id
				}
			})
		},
		// 上传头像
		// uploadImg() {
		// 	alert('111')
		// },
		// 职业资称
		onConfirmti(value, index) {
			if(localStorage.getItem('teacher') == 2) {
				this.$request.setTeacher({title: value, id: this.id}).then(res => {
					this.titlePopup = false
					this.personDate.title = value
				})
			} else {

			}
    },
    // 上传头像
    // uploadImg() {
    // 	alert('111')
    // },
    // 职业资称
    onConfirmti(value, index) {
      if (localStorage.getItem("teacher") == 2) {
        this.$request.setTeacher({ title: value, id: this.id }).then((res) => {
          this.titlePopup = false;
          this.personDate.title = value;
        });
      } else {
      }
    },
    showtitle() {
      this.titlePopup = true;
    },
    // 学历
    onConfirmed(value, index) {
      if (localStorage.getItem("teacher") == 2) {
        this.$request
          .setTeacher({ education: value, id: this.id })
          .then((res) => {
            this.educationPopup = false;
            this.personDate.education = value;
          });
      } else {
        this.$request
          .setMember({ education: value, id: this.id })
          .then((res) => {
            this.educationPopup = false;
            this.personDate.education = value;
          });
      }
    },
    showeducation() {
      this.educationPopup = true;
    },
    // 性别
    onConfirm(value, index) {
      if (localStorage.getItem("teacher") == 2) {
        this.$request
          .setTeacher({ sex: index + 1, id: this.id })
          .then((res) => {
            this.personDate.sexname = value;
            this.sexPick = false;
          });
      } else {
        this.$request.setMember({ sex: index + 1, id: this.id }).then((res) => {
          this.personDate.sexname = value;
          this.sexPick = false;
        });
      }
    },
    showsex() {
      this.sexPick = true;
    },
    // 时间
    okTime(value) {
      if (localStorage.getItem("teacher") == 2) {
        this.$request
          .setTeacher({
            birthday: this.$utils.parseToDateYMD(value),
            id: this.id,
          })
          .then((res) => {
            this.currentDate = this.$utils.parseToDateYMD(value);
            this.personDate.birthday = this.$utils.parseToDateYMD(value);
            this.show = false;
            this.sexPick = false;
          });
      } else {
        this.$request
          .setMember({
            birthday: this.$utils.parseToDateYMD(value),
            id: this.id,
          })
          .then((res) => {
            this.currentDate = this.$utils.parseToDateYMD(value);
            this.personDate.birthday = this.$utils.parseToDateYMD(value);
            this.show = false;
            this.sexPick = false;
          });
      }

      console.log(this.$utils.parseToDateYMD(value));
    },
    // 弹出
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style lang="scss" scope>
@import "@/assets/css/variable";
.dateContainer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: $border-c;
  .header {
    margin-top: 1rem;
  }
  .teacher {
    margin-top: 1rem;
  }
}
</style>